<template>
  <el-dialog
    v-toggle-full
    class="base-dialog"
    :custom-class="'panna-dialog_small'"
    :title="langData.setTag"
    :append-to-body="true"
    :visible.sync="innerDialogFormVisible"
    :before-close="handleClose"
    ><el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item :label="langData.w" prop="labelWidth">
        <el-input
          v-model="form.labelWidth"
          size="small"
          onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/)"
          onafterpaste="this.value=this.value.match(/\d+\.?\d{0,2}/)"
          maxlength="9"
        ></el-input>
      </el-form-item>
      <el-form-item :label="langData.h" prop="labelHeight">
        <el-input
          v-model="form.labelHeight"
          size="small"
          onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/)"
          onafterpaste="this.value=this.value.match(/\d+\.?\d{0,2}/)"
          maxlength="9"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="base-dialog-footer">
      <el-button type="primary" @click="onSubmit('form')">{{
        btn.Confirm
      }}</el-button>
      <el-button @click="handleClose">{{ btn.Cancel }}</el-button>
    </span>
    <div
      id="printDiv"
      ref="printDiv"
      style="display: none; width: 60mm; height: 40mm"
    >
      <div
        v-for="(item, index) in printData"
        :key="index"
        style="display: flex; flex-direction: column; align-items: center"
      >
        <img
          :src="item | creatBarCode(item, form.labelHeight, form.labelWidth)"
          style="max-width: 100%; max-height: 100%"
        />
      </div>
    </div>
    <iframe
      ref="printIframe"
      frameborder="0"
      scrolling="no"
      style="margin: 0px; padding: 0px; width: 0px; height: 0px"
    ></iframe>
  </el-dialog>
</template>
<script>
import { DeviceLabelSettingGet, DeviceLabelSettingUpdate } from "../api/Device";
import BarcodeJs from "jsbarcode";
export default {
  name: "PrintBarCode",
  components: {},
  filters: {
    creatBarCode(barCodeData, num, labelHeight, labelWidth) {
      console.log("触发条码生成事件");
      const canvas = document.createElement("canvas");
      BarcodeJs(canvas, barCodeData, {
        format: "CODE128",
        displayValue: true,
        // height: 165,
        // width: 2,
        height: labelHeight,
        width: labelWidth,
        textAlign: "center",
        font: "cursive",
        fontOptions: "bold",
        fontSize: 30,
        textMargin: 3,
      });
      return canvas.toDataURL("image/png");
    },
  },
  props: {
    dialogFormVisible: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
    numList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      printData: [],
      innerDialogFormVisible: false,
      form: {
        labelWidth: "",
        labelHeight: "",
      },
      rules: {
        labelWidth: [
          { required: true, message: "请输入宽度", trigger: "blur" },
        ],
        labelHeight: [
          { required: true, message: "请输入高度", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    langData() {
      return this.$t("ModuleDevice.components");
    },
  },
  created() {
    if (this.$i18n?.locale === "en") {
      this.rules.labelWidth[0].message = this.langData.wValid;
      this.rules.labelHeight[0].message = this.langData.hValid;
    }

    this.innerDialogFormVisible = this.dialogFormVisible;
    DeviceLabelSettingGet({ type: 1 }).then((res) => {
      res.data.labelWidth = res.data.paperWidth;
      res.data.labelHeight = res.data.paperHeight;
      this.form = res.data;
      this.form.labelWidth = res.data.paperWidth;
      this.form.labelHeight = res.data.paperHeight;
    });
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // if (this.form.labelWidth.indexOf("mm") === -1) {
          //   this.form.labelWidth = this.form.labelWidth + "mm";
          // }
          // if (this.form.labelHeight.indexOf("mm") === -1) {
          //   this.form.labelHeight = this.form.labelHeight + "mm";
          // }
          this.printTag(this.numList);
          this.form.paperWidth = this.form.labelWidth;
          this.form.paperHeight = this.form.labelHeight;
          DeviceLabelSettingUpdate(this.form).then((res) => {});
        }
      });
    },
    // 标签打印
    printTag(data) {
      this.printData = data;
      this.$nextTick(() => {
        var printIframe = this.$refs.printIframe;
        var html = this.$refs.printDiv.innerHTML;
        printIframe.setAttribute("srcdoc", html);
        printIframe.onload = function() {
          // 去掉iframe里面的dom的body的padding margin的默认数值
          printIframe.contentWindow.document.body.style.padding = "0px";
          printIframe.contentWindow.document.body.style.margin = "0px";
          // 开始打印
          printIframe.contentWindow.focus();
          printIframe.contentWindow.print();
        };
      });
    },
    handleClose() {
      this.$emit("update:dialogFormVisible", false);
      this.innerDialogFormVisible = false;
    },
  },
};
</script>
